<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{common/layout :: html(title='搜索结果 - ' + ${keyword}, content=~{::content})}">
<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <style>
        .product-card {
            transition: transform 0.3s;
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
        }
        .page-header {
            background: linear-gradient(135deg, #17a2b8, #138496);
            color: white;
            padding: 60px 0;
        }
    </style>
</head>
<body>
<div th:fragment="content">
    <!-- 页面头部 -->
    <section class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 mx-auto text-center">
                    <h1 class="display-5 fw-bold mb-3">搜索结果</h1>
                    <p class="lead">您搜索的关键词: "<strong th:text="${keyword}"></strong>"</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 产品列表 -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <!-- 如果没有产品 -->
                <div th:if="${#lists.isEmpty(products)}" class="col-12 text-center py-5">
                    <i class="fas fa-search fa-4x text-muted mb-3"></i>
                    <h4 class.text-muted">未能找到与 "<strong th:text="${keyword}"></strong>" 相关的产品</h4>
                    <p class="text-muted mb-4">请尝试更换搜索关键词，或浏览我们的产品中心。</p>
                    <a href="/product/list" class="btn btn-success">
                        <i class="fas fa-shopping-cart"></i> 前往产品中心
                    </a>
                </div>

                <!-- 产品列表 -->
                <div th:each="product : ${products}" class="col-lg-3 col-md-4 col-sm-6 mb-4">
                    <div class="card product-card h-100">
                         <div class="position-relative">
                            <img th:src="@{${product.imageUrl} ?: '/images/default-product.jpg'}"
                                 th:alt="${product.name}"
                                 class="card-img-top"
                                 style="height: 250px; object-fit: cover;">
                            <div class="position-absolute top-0 end-0 m-2">
                                <span class="badge bg-success" th:text="${product.category}">分类</span>
                            </div>
                        </div>

                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title" th:text="${product.name}">产品名称</h5>

                            <div class="mb-2">
                                <small class="text-muted">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span th:text="${product.origin}">产地</span>
                                </small>
                            </div>

                            <p class="card-text flex-grow-1" th:text="${#strings.abbreviate(product.description, 80)}">
                                产品描述...
                            </p>

                            <div class="mt-auto">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="h5 text-success mb-0">
                                        ¥<span th:text="${product.price}">0.00</span>
                                    </span>
                                    <small class="text-muted">
                                        库存：<span th:text="${product.stock}">0</span>
                                    </small>
                                </div>
                                <a th:href="@{/product/detail/{id}(id=${product.id})}"
                                   class="btn btn-success w-100">
                                    <i class="fas fa-eye"></i> 查看详情
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
</body>
</html> 